<template>
    <div class="newsBox" @click="handleClick">
        <div class="newsBoxTitle">
            <el-tag :color="currentTag?.color" type="primary" effect="dark" style="color:#fff;">
                {{ currentTag?.label }}
            </el-tag>
            <span class="newsActive">{{ data.newsTitle }}</span>
        </div>
        <div class="mt-[5px] mb-[5px] text-slate-500">{{ data.abstractReal }}</div>
        <div class="flex justify-between">
            <div class="flex mr-[2px] items-center">
                <img src="../assets1/assets/trinasolar-logo.png" class="w-[16px] h-[16px]" alt="">
                <span>{{ data.newsSource }}{{ (data.opPerson ? '.由'+ data.opPerson + '更新' : '') }}</span>
                <span>{{ data.createTime }}</span>
            </div>

            <div @click="(e) => e.stopPropagation()">
                <el-button v-permission="['write']" v-if="data.isPublished" link class="but">{{ data.pubTime }}已发布</el-button>
                <el-button v-permission="['write']" v-if="data.isSelect === 1" link :icon="Minus" @click="emits('removeData', data.id)" class="but">移除</el-button>
                <el-button v-else link :icon="Plus" @click="emits('addData', data.id)" class="but" v-permission="['write']">加入待发布</el-button>
                <el-button link :icon="EditPen" class="but" @click="emits('edit',data)" v-permission="['write']">编辑</el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Plus, Minus, EditPen } from '@element-plus/icons-vue'
import { defineProps, defineEmits, computed } from 'vue'
import { newsTypes } from '@/components/newsTypes'
const { data } = defineProps(['data'])
const emits = defineEmits(['removeData', 'addData','click','edit'])

const currentTag = computed(() => {
    return newsTypes.find(item => item.value == data.classReal)
})

const handleClick = () => {
    emits('click', data)
}
</script>

<style scoped>
.newsBox {
    width: 100%;
    height: 110px;
    padding: 20px 10px;
    border-bottom: 1px solid #ccc;
}

.newsBoxTitle {
    display: flex;
    color:#000;
}

.newsBoxTitle span {
    color: #ccc;
}
.but{
    border:0!important;
    padding: 0!important;
}
.newsActive{
    color:#000!important;
    margin-left:10px;
    font-size: 17px;
}
.newsActive:hover {
    color: var(--el-color-primary)!important;
}
</style>
